import 'package:example/app/utils/third_app_utils.dart';
import 'package:example/app/widget/article_favourite_widget.dart';
import 'package:example/app/widget/web_view_title.dart';
import 'package:flutter/material.dart';
import 'package:example/index.dart';

import 'article_detail_controller.dart';

class ArticleDetailPage extends GetView<ArticleDetailController> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<ArticleDetailController>(
        init: controller,
        builder: (_) {
          return Scaffold(
            appBar: AppBar(
              title: WebViewTitle(
                title: _.articleBean.title ?? '',
                future: _.finishedCompleter.future,
              ),
              actions: <Widget>[
                IconButton(
                  tooltip: '浏览器打开',
                  icon: Icon(Icons.language),
                  onPressed: () {
                    launch(_.articleBean.link!, forceSafariVC: false);
                  },
                ),
              ],
            ),
            body: SafeArea(
              bottom: false,
              child: WebView(
                // 初始化加载的url
                initialUrl: _.articleBean.link,
                // 加载js
                javascriptMode: JavascriptMode.unrestricted,
                navigationDelegate: (NavigationRequest request) {
                  ///TODO isForMainFrame为false,页面不跳转.导致网页内很多链接点击没效果
                  debugPrint('导航$request');
                  if (!request.url.startsWith('http')) {
                    ThirdAppUtils.openAppByUrl(request.url);
                    return NavigationDecision.prevent;
                  } else {
                    return NavigationDecision.navigate;
                  }
                },
                onWebViewCreated: (WebViewController controller) {
                  _.webViewController = controller;
                  _.webViewController.currentUrl().then((url) {
                    debugPrint('返回当前$url');
                  });
                },
                onPageFinished: (String value) async {
                  debugPrint('加载完成: $value');
                  if (!_.finishedCompleter.isCompleted) {
                    _.finishedCompleter.complete(true);
                  }
                  refreshNavigator();
                },
              ),
            ),
            bottomNavigationBar: BottomAppBar(
              child: IconTheme(
                data: Theme.of(context).iconTheme.copyWith(opacity: 0.7),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    IconButton(
                      tooltip: '刷新',
                      icon: const Icon(Icons.autorenew),
                      onPressed: () {
                        _.webViewController.reload();
                      },
                    ),
                    Obx(() {
                      return IconButton(
                          icon: Icon(Icons.arrow_back_ios),
                          onPressed: !_.canGoBack
                              ? null
                              : () {
                                  _.webViewController.goBack();
                                  refreshNavigator();
                                });
                    }),
                    Obx(() {
                      return IconButton(
                          icon: Icon(Icons.arrow_forward_ios),
                          onPressed: !_.canGoForward
                              ? null
                              : () {
                                  _.webViewController.goForward();
                                  refreshNavigator();
                                });
                    }),

                    /// 收藏
                    ArticleFavouriteWidget(
                      articleBean: _.articleBean,
                    )
                  ],
                ),
              ),
            ),
          );
        });
  }

  /// 刷新导航按钮
  ///
  /// 目前主要用来控制 '前进','后退'按钮是否可以点击
  /// 但是目前该方法没有合适的调用时机.
  /// 在[onPageFinished]中,会遗漏正在加载中的状态
  /// 在[navigationDelegate]中,会存在页面还没有加载就已经判断过了.
  void refreshNavigator() {
    /// 是否可以后退
    controller.webViewController.canGoBack().then((value) {
      debugPrint('canGoBack--->$value');
      return controller.canGoBack = value;
    });

    /// 是否可以前进
    controller.webViewController.canGoForward().then((value) {
      debugPrint('canGoForward--->$value');
      return controller.canGoForward = value;
    });
  }
}
